<template>
<div>
  <img src="../../assets/icon/askPrice/close.png" alt=""  style="position:relative;bottom:63px;float: right;
  cursor:pointer;" @click="closeFrame()">
  <div class="line"></div>
  <form id="form1" enctype="multipart/form-data" method="post" style="margin-left: 20px;">
  <div  :class="local?'curr':'tab'" @click="getCurr(1)">从本地导入</div>

  <div  :class="local?'tab':'curr'" @click="getCurr(2)">上传附件（照片）</div>
  <div style="display: inline-block;border-bottom:1px solid #c7c7c7;width:34%;position:relative;top:20px;right:5px">
    </div>
  <div v-if="local" style="margin-top: 10px">
    <b>第一步：</b><a style="color: #4A90E2;" href="http://192.168.0.106:8200/img/common/20180524143646870341.xls?x-oss-process=style/marking_text">下载Excel模板</a><br>
    <br>
    <b>第二步：</b>
    <input style="color: #ffffff;background: #f08327;width:84px;height:30px;border: none;border-radius:4px;cursor:pointer" type="button" value="选择文件">

    <input type="file" multiple="multiple"  @change="uploadExcel($event)" id="leadIn" style="position:absolute;
    left:100px;width:84px;height:30px;opacity: 0" >
    <!--<input type="file" multiple="multiple"  @change="uploadExcel($event)" id="leadIn"  >-->
    <span style="color:#f08327;font-size: 12px;margin-left: 42px">说明：通过下载模板，将商品信息快速导入，可以大量缩短报价时间哦~
  </span>
    <p class="errorMessage" v-show="errorMessage">
      <img src="../../assets/icon/askPrice/errorWarnning.png" style="position:relative;top:2px" alt="">
      您上传的好像不是Excel，请检查文件</p>
    <div id="Excels">
      <div class="Excels"  v-for="(Excel,key) in Excels">
      <span><span class="fileName">{{Excel.name}}</span>&nbsp;&nbsp;({{Excel.size}})</span>
      <img src="../../assets/icon/askPrice/close-mini.png"
           style="float: right;margin-right: 15px;margin-top: 8px;cursor: pointer"
           alt="" :id="key" >
      <div class="progress">
        <div class="uploading">
        </div>
      </div>
    </div>
    </div>
  </div>
  <div v-else="!local" style="margin-top:20px">
    <div style="display: inline-block;position: relative;bottom: 10px">
      <b>第一步：</b>
      <input style="color: #ffffff;background: #f08327;width:84px;height:30px;border: none;border-radius:4px;cursor:pointer" type="button" value="选择文件">
    <input type="file" multiple="multiple"  @change="uploadFiles($event)" id="upload" style="position:absolute;
    left:60px;top:0;width:84px;height:30px;opacity: 0">
    </div>
    <!--<input type="file" multiple="multiple"  @change="uploadFiles($event)" id="leadIn"  >-->
    <div style="color:#f08327;font-size: 12px;margin-left: 42px;width:70%;display: inline-block;height:34px;line-height:
       17px">说明：上传商品清单、产品规格书、样品图等（支持jpg、jpeg、png、doc、excel等格式） 要求所有文件不超过100M。</div>

    <div class="files" v-for="(file,key) in files">
      <span><span class="fileName">{{file.name}}</span>&nbsp;&nbsp;({{file.size}})</span>
      <img src="../../assets/icon/askPrice/close-mini.png"
           style="float: right;margin-right: 15px;margin-top: 8px;cursor: pointer" @click="stopUploadFile($event)"
           :id="key"
           alt="">
      <div class="progress"><div class="uploading"></div></div>
    </div>
  </div>
  <div style="padding-top: 40px;padding-bottom: 15px">
    <div class="line" style="width:96%;;"></div>
    <div class="buttons">
      <input type="button" class="button1" value="导入" @click="leadIn()">
      <input type="button" class="button2" value="取消" @click="closeFrame()">
    </div>
  </div>
  </form>
  </div>

</template>

<script>
  import qs from 'qs'
    export default {
        name: "AskPriceLeadInFrame",
      data(){
          return{
            errorMessage:false,
            Excels:[],
            Files:[],
            ExcelsNum:0,
            FilesNum:0,
            ExcelUrl:[],
            FileUrl:[],
          }
      },
      props:['local'],
      methods:{
          /*关闭弹框*/
        closeFrame(){
          this.$emit('closeDialog');
        },
        /*Tab切换*/
        getCurr(Val){
          if(Val==1){
            this.local=true;
          }
          else{
            this.local=false;
          }
        },
        /*上传Excel*/
        uploadExcel(e){
          let that = this;
          let files = e.target.files;
          for(let i=0;i<files.length;i++){
            let file = files[i];
            let name = file.name;
            let type = file.name.split('.')[1];
            // if (type !='xlsx'&&type !='xls') {
            //   this.errorMessage=true;
            //   return;
            // }
            // else{
            //   this.errorMessage=false;
            // }
            let fileSize = 0;
            if (file.size > 1024 * 1024){
              fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            }
            else{
              fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
            }
            let fileInfo={
                        name:name,
                        type:type,
                        size:fileSize,
                        number:this.ExcelsNum,
            };
            this.Excels.push(fileInfo);
            console.log(this.ExcelsNum);
            let number=this.ExcelsNum;
            this.$nextTick(function () {
              that.upExcelFn(file,i,number);
            })

            this.ExcelsNum++;

          }
          // this.ExcelsNum+=files.length;
          // console.log(this.ExcelsNum);
        },
        upExcelFn(file,i,num){
          // console.log(document.getElementById('Excels'));
          // let div =document.createElement("div");
          // div.setAttribute("class", "Excels");
          // div.innerHTML="<span><span class='fileName'>{{Excel.name}}</span>&nbsp;&nbsp;({{Excel.size}})</span><img src='../../assets/icon/askPrice/close-mini.png' style='float: right;margin-right: 15px;margin-top: 8px;cursor: pointer' @click='stopUploadExcel($event)'  id='key' ><div class='progress'><div class='uploading'></div></div>";
          // let parent = document.getElementById('Excels');
          // parent.appendChild(div);
          var formData = new FormData();
          // for(let i=0;i<files.length;i++){
            formData.append('file',file);
          // }
          var xhr = new XMLHttpRequest();
          console.log(i);
          console.log('this.ExcelsNum'+':'+this.ExcelsNum);

          /* 事件监听 */

          xhr.upload.addEventListener("progress", uploadProgress, false);
          xhr.addEventListener("load", uploadComplete, false);
          xhr.addEventListener("error", uploadFailed, false);
          xhr.addEventListener("abort", uploadCanceled, false);

          xhr.open("POST", this.$store.state.api.upload, true);
          xhr.send(formData);
          let that = this;
          /*停止单文件传输*/
          let close = document.getElementsByClassName('uploading')[num].parentElement.previousElementSibling;
          console.log(close);
          close.onclick=function(){
            xhr.abort()
            console.log(close.parentElement);
            let file = close.parentElement;
            file.parentNode.removeChild(file);
            that.ExcelsNum--;
            // alert(that.ExcelsNum);
          };
          function uploadProgress(evt) {
            if (evt.lengthComputable) {
              let percentComplete = Math.round(evt.loaded * 100 / evt.total);
              let progress = percentComplete.toString() + '%';
              console.log(that.ExcelsNum);
              document.getElementsByClassName('uploading')[num].style.width=progress;
            }
          };
          function uploadComplete(evt) {
            /* 当服务器响应后，这个事件就会被触发 */
            // console.log(evt)
            // console.log(evt.target.responseText);
            let response = evt.target.responseText.split(',')[0].split('"')[3];
            console.log('num'+':'+num);
            document.getElementsByClassName('uploading')[num].setAttribute("value", response);
            // console.log(response);
            // that.ExcelUrl.push(response);
            // console.log(that.ExcelsNum);
          };
          function uploadFailed(evt) {
            alert("上传文件时发生了错误");
          };
          function uploadCanceled(evt) {
            alert("该文件已停止上传");
          };

          // this.$http.post(this.$store.state.api.upload,formData,
          //   {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
          //   console.log(response.data);
          // }, response => {
          //   console.log(response);
          // })
        },


        /*导入*/
        leadIn(){
          var files = document.getElementsByClassName('uploading');
          console.log(files);
          for(let i in files){
            this.ExcelUrl.push(files[i].value);
          }
          console.log(this.ExcelUrl);

        }
  }
    }
</script>

<style scoped>
.line{
  border-bottom: 1px solid #C5CCD6;
  width:100%;
  position:relative;
  bottom:20px;

}
.tab{
  display: inline-block;border:1px solid #c7c7c7;padding:12px 0px;width:30%;text-align:center;cursor: pointer;
}
  .curr{
    display: inline-block;border:1px solid #c7c7c7;padding:12px 0px;width:30%;text-align:center;cursor: pointer
  ;border-bottom: none;
    border-top: 2px solid #f08327;
    color:#f08327;

  }
  .buttons{
    float:right;
    margin-right: 10px;
  }
  .buttons input{
    cursor:pointer;
  }
  .button1{
    color:#fff;
    background: #f08327;
    border:none;
    border-radius: 2px;
    width:104px;
    height:30px;
    font-size: 14px;
    margin-right: 20px;
  }
  .button2{
    background: #FFFFFF;
    border: 1px solid #666666;
    border-radius: 2px;
    width:104px;
    height:30px;
    font-size: 14px;

  }
  .errorMessage{

    color:red;
    font-size: 12px;
  }
  .Excels{
    width:80%;
    height:28px;
    background: #f5f5f5;
    margin-left: 55px;
    margin-top: 10px;
    line-height: 28px;
    font-size:12px;
  }
.Excels span{
  margin-left: 11px;
}
  .progress{
    float: right;
    margin-right: 15px;
    width:25%;
    height:10px;
    margin-top: 10px;
    background: #ffffff;
  }
.progress .uploading{
  height:100%;
  position:relative;
  bottom:8px;
  background: #f08327;
  display: inline-block;
}
  .fileName{
    width:178px;
    overflow: hidden;
  }
</style>

